<template>
	<view>
		<form class="flowform" @submit="submit">
			<view class="formlist inputtext" @tap="startTime">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>起始日期</label><text class="required">*</text></view>
					<view class="controlvalue">
						<input type="text" v-model="schedule.startTime" name="startTime" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="endTime">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>结束日期</label><text class="required">*</text></view>
					<view class="controlvalue">
						<input type="text" v-model="schedule.endTime" name="endTime" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist margin-bottom-30">
				<view class="formgroup  padding-17">
					<view class="labletitletar"><label>记录内容</label><text class="required">*</text></view>
					<view class="controlvalue  uni-textarea">
						<textarea v-model="schedule.content" name="content" maxlength="500" placeholder="输入" />
						</view>
				</view>
			</view>
			<view class="formlist inputtext margin-top-20">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>提醒设置</label></view>
					<view class="controlvalue">
						<input type="number" v-model="schedule.early" name="early" placeholder="默认一小时提醒我" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>APP提醒</label></view>
					<view class="controlvalue">
						<switch :checked="schedule.appAlert" name="appAlert" class="margin-left--18" style="transform: scale(0.7)" @change="switchChange('appAlert')" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>微信提醒</label></view>
					<view class="controlvalue">
						<switch :checked="schedule.weChatAlert" name="weChatAlert" class="margin-left--18" style="transform: scale(0.7)" @change="switchChange('weChatAlert')"/>
					</view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>邮件提醒</label></view>
					<view class="controlvalue">
						<switch :checked="schedule.mailAlert" name="mailAlert" class="margin-left--18" style="transform: scale(0.7)" @change="switchChange('mailAlert')"/>
					</view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>短信提醒</label></view>
					<view class="controlvalue">
						<switch :checked="schedule.mobileAlert" name="mobileAlert" class="margin-left--18" style="transform: scale(0.7)" @change="switchChange('mobileAlert')"/>
					</view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="colour">
				<view class="formgroup">
					<view class="labletitle"><label>标签颜色</label></view>
					<view class="controlvalue">
						<input type="text" name="colour" class="margin-right-36" :style="{background:schedule.colour}" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<uni-popup ref="showpopup" :type="type">
				<view class="ym-color-operation">
					<text class="uni-tip-button" @click="cancel">取消</text>
				</view>
				<view class="uni-tip">
					<view class="ym-color-list" >
						<block v-for="(item, key) in colourList" :key="key">
							<view class="ym-color-cell" :style="{background:item.background }" @tap="selectClour(item)"></view>
						</block>
					</view>
				</view>
			</uni-popup>
			<view class="buttom-box">
				<view class="flow-button">
					<button class="btn-same btn-submit" form-type="submit" >保存</button>
				</view>
			</view>
		</form>
		<view class="height-100"></view>
		<w-picker :mode="mode" ref="picker"></w-picker>
	</view>
</template>

<script>
	import helper from '@/common/js/helper.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import graceChecker from '@/common/js/graceChecker.js'
	let formRule=[
			{name:"startTime",checkType:"notnull",checkRule:"",errorMsg:"选择起始日期"},
			{name:"endTime",checkType:"notnull",checkRule:"",errorMsg:"选择结束日期"},
			{name:"content", checkType : "notnull", checkRule:"",  errorMsg:"输入内容"},
		];
	export default {
		components: {
			wPicker,
			uniPopup
		},
		data() {
			return {
				schedule:{
					startTime:'',
					endTime:'',
					content:'',
					early:'',
					appAlert:false,
					weChatAlert:false,
					mailAlert:false,
					mobileAlert:false,
					colour:''
				},
				mode:'',
				type:'',
				colourList:[{
						background: "rgb(24,138,226)",
					},
					{
						background: "rgb(53,184,224)",
					},
					{
						background: "rgb(38,191,140)",
					},
					{
						background: "rgb(249,200,81)",
					},
					{
						background: "rgb(255,91,91)",
					},
					{
						background: "rgb(91,105,188)",
					},
					{
						background: "rgb(255,138,204)",
					},
					{
						background: "rgb(59,62,71)",
					},
					{
						background: "rgb(40,40,40)",
					}
				],
			}
		},
		onLoad(e) {
			if (Object.prototype.hasOwnProperty.call(e, 'id')) {
				helper.ajax({
					url: 'api/extend/Schedule/'+e.id,
					success: res => {
						let _schedule = res.data.data;
						_schedule.appAlert = _schedule.appAlert == 0 ? false:true;
						_schedule.weChatAlert = _schedule.weChatAlert == 0 ? false:true;
						_schedule.mailAlert = _schedule.mailAlert == 0 ? false:true;
						_schedule.mobileAlert = _schedule.mobileAlert == 0 ? false:true;
						this.schedule=_schedule;
						this.schedule.startTime=helper.toDate( _schedule.startTime, 'yyyy-MM-dd');
						this.schedule.endTime=helper.toDate( _schedule.endTime, 'yyyy-MM-dd');
					}
				});
				uni.setNavigationBarTitle({
					title: "日程编辑"
				});
			}
		},
		methods: {
			switchChange(e){
				this.schedule[e] = this.schedule[e] == false ? true : false;
			},
			startTime(e){
				this.mode="date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.schedule.startTime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			endTime(e){
				this.mode="date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.schedule.endTime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			colour(){
				this.type = 'bottom'
				this.$refs.showpopup.open()
			},
			cancel() {
				this.$refs.showpopup.close()
			},
			selectClour(item){
				this.schedule.colour=item.background;
				this.$refs.showpopup.close()
			},
			submit(e){
				let formData =this.schedule;
				if (!graceChecker.check(e.detail.value, formRule)) {
					helper.msg(graceChecker.error);
					return;
				}
				let url = "api/extend/Schedule";
				let method ="POST";
				if(Object.prototype.hasOwnProperty.call(this.schedule, 'id')){
					url = url+"/"+this.schedule.id
					method ="PUT";
				}
				formData.startTime=Date.parse( formData.startTime);
				formData.endTime=Date.parse( formData.endTime);
				formData.appAlert=formData.appAlert==false ? 0 : 1,
				formData.weChatAlert=formData.weChatAlert==false ? 0 : 1,
				formData.mailAlert=formData.mailAlert==false ? 0 : 1,
				formData.mobileAlert=formData.mobileAlert==false ? 0 : 1,
				helper.ajax({
					url: url,
					method: method,
					contentType:"application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.message,'success');
						uni.redirectTo({
							url: './index',
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
	.required{
		color: red;
	}
	.btn-submit{
		width: 100%;
	}
	.popup-content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		background-color: #fff;
		padding: 15px;
		font-size: 14px;
	}
	/* 提示窗口 */
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 25rpx;
		background-color: #fff;
	}
	.ym-color-list{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}
	.ym-color-cell{
		display: flex;
		width: 25%;
		height: 72rpx;
		height: 72rpx;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	.ym-color-operation{
		padding: 0 28rpx;
		height: 88rpx;
		background-color: #f0f2f6;
		display: flex;
		align-items: center;
		color: #9A9A9A;
	}
	.margin-left--18{
		margin-left: -18rpx;
	}
	.margin-right-36{
		margin-right: 36rpx
	}
</style>
